<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">		<block slot="backText"></block>
			<block slot="content" v-if="type == 'money'">余额提现</block>
			<block slot="content" v-if="type != 'money'">积分提现</block>
		</cu-custom>
		<block v-if="preview && preview.config.withdraw_is_open == '0'">
			<view class="text-gray text-center margin-xl">服务暂未开启</view>
		</block>
		<block v-else>
			
			<!-- <view class="whole-box" style="background-image: url(https://pingtuan-1251091607.cos.ap-shanghai.myqcloud.com/images/2021/03/10/image_1615357083_VQ5anlu7.jpg);background-size: 100% 100%;"> -->
			<view class="whole-box">
				<view class="gold-black-box">
					
					<view class="top-box">
						<!-- <image class="top-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
						<view class="top-box-content">
							<!-- <image class="bg-logo" src="@/static/black_bg/bg-logo.png"></image> -->
							<text class="page-title text-center">{{title}}</text>
							<view class="data-box">
								<block v-for="(item,i) in paymentPicker" :key="i">
								<view @tap="PaymentPickerChange(i)">
									<image :src="i==withdraw_mode?item.icon_cur:item.icon"></image>
									<text>{{item.name}}</text>
								</view>
								</block>
							</view>
						</view>
					</view>
					
					<view class="my-data-box" :class="'payment_ic'+withdraw_mode"
					>
						<!-- <image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
						<view class="my-data-box-content" v-if="withdraw_mode == 9999">
							<view class="input-line">
								<text>微信号</text>
								<input type="text" placeholder="请填写微信号" placeholder-class="input-holder"  v-model="formData.wx_number" />
							</view>
							<view class="input-line">
								<text>真实姓名</text>
								<input type="text" placeholder="请输入真实姓名" placeholder-class="input-holder"  v-model="formData.realname"/>
							</view>
							<view class="input-line">
								<text>提现</text>
								<input type="digit" placeholder="请输入提现金额" placeholder-class="input-holder"  v-model="formData.cash" @input="onInput"/>
							</view>
							<view class="input-line">
								<text>到账</text>
								<input type="digit" disabled="true" placeholder-class="input-holder"  v-model="coupon" />
							</view>
							<view class="input-line">
								<text>交易密码</text>
								<input placeholder="请输入交易密码" placeholder-class="input-holder" v-model="password" type="password"/>
							</view>
							<view class="tips"  v-if="type == 'money'">
								当前可提现金额:<text>￥{{preview?preview.account.user_money:0}}</text>
												
								<text style="color: #000000;font-weight: bold;" @tap="goPage('/pages/member/password2')">设置交易密码</text>
							</view>
							
							<view class="tips"  v-else>
								当前可提现积分:<text>￥{{preview?preview.account.user_integral:0}}</text>
												
								<text style="color: #000000;font-weight: bold;" @tap="goPage('/pages/member/password2')">设置交易密码</text>
							</view>
							<view class="tips"  v-if="type == 'money'">提现手续费:<text>{{preview?preview.config.withdraw_commission:'-'}}%</text></view>
							
							<view class="tips"  v-if="type == 'integral'">
								提现手续费:<text>{{preview?preview.config.integral_commission:'-'}}%
								
								</text>
							<!-- 	<text>
									 提现比例, 1 : {{preview?preview.config.integral_withdraw:'-'}}
								</text> -->
							</view>
							<view class="tips">提现说明<text>1)请确保提现信息正确，以免提现失败;</text><br/><text>2)提现申请在1-2个工作日内审核完成，若是节假日申请，则延迟至工作日审核；</text>
							<text>3)每人每天可提现一次放上去</text></view>
							
						</view>
						<view class="my-data-box-content" v-if="withdraw_mode == 0">
							<view class="input-line">
								<text>持卡人</text>
								<input type="text" placeholder="请输入持卡人姓名" placeholder-class="input-holder"  v-model="formData.realname"/>
							</view>
							<view class="input-line">
								<text>卡号</text>
								<input type="number" placeholder="请填写卡号" placeholder-class="input-holder"  v-model="formData.account_number"/>
							</view>
							<!-- <view class="input-line">
								<text>银行</text>
								<input type="text" placeholder="请输入银行名称" placeholder-class="input-holder"  v-model="formData.bank_name"/>
							</view> -->
							
							<!-- <view class="input-line">
								<text>开户支行</text>
								<input type="text" placeholder="请填写开户支行" placeholder-class="input-holder"  v-model="formData.bank_name_other"/>
							</view> -->
							<!--广东快付 代付专用-->
							<!-- <view class="input-line">
								<text>开户支行号</text>
								<input type="text" placeholder="请填写开户支行号" placeholder-class="input-holder"  v-model="formData.other_number"/>
							</view> -->
							
							<!-- <template>
							    <view class="input-line" >
									<text>开户支行</text>
							        <bjx-inputs the-style="margin: 20upx auto;font-size: 26upx;" :value="value2" item-key="value" placeholder='请输入内容' @list="getData2" @select='select2' overflow="hide">
							        </bjx-inputs>
							    </view>
							</template>
							
							<template>
							    <view class="input-line" >
								<text>开户支行号</text>					
									<bjx-inputs the-style="margin: 20upx auto;" ref='inputs1' :value="value1" placeholder='禁止输入' @list="getData1" @select='select1' @focus="focus1" @blur="blur1" disabled="disabled">
									</bjx-inputs>
								</view>
							</template> -->
							
							<view class="input-line">
								<text>提现</text>
								<input type="digit" placeholder="请输入提现金额" placeholder-class="input-holder"  v-model="formData.cash" @input="onInput"/>
							</view>
							<view class="input-line">
								<text>到账</text>
								<input type="digit" disabled="true" placeholder-class="input-holder"  v-model="coupon" />
							</view>
							<!-- <view class="input-line">
								<text>交易密码</text>
								<input placeholder="请输入交易密码" placeholder-class="input-holder"  v-model="password" type="password"/>
							</view> -->
							<view class="tips"  v-if="type == 'money'">
								当前可提现金额:<text>￥{{preview?preview.account.user_money:0}}</text>
												
								<!-- <text style="color: #000000;font-weight: bold;" @tap="goPage('/pages/member/password2')">设置交易密码</text> -->
							</view>
							
							<view class="tips"  v-else>
								当前可提现积分:<text>￥{{preview?preview.account.user_integral:0}}</text>
												
								<!-- <text style="color: #000000;font-weight: bold;" @tap="goPage('/pages/member/password2')">设置交易密码</text> -->
							</view>
							<view class="tips"  v-if="type == 'money'">提现手续费:<text>{{preview?preview.config.withdraw_commission:'-'}}%</text></view>
							
							<view class="tips"  v-if="type == 'integral'">提现手续费:<text>{{preview?preview.config.integral_commission:'-'}}%</text>
								<!-- <text>
									 提现比例, 1 : {{preview?preview.config.integral_withdraw:'-'}}
								</text> -->
							</view>
							<!-- <view class="tips">提现说明<text>1)请确保提现信息正确，以免提现失败;</text><br/><text>2)提现申请在1-2个工作日内审核完成，若是节假日申请，则延迟至工作日审核；</text>
							<text>3)每人每天可提现一次放上去</text></view> -->
							
							<view class="tips">提现说明<text>1)目前暂未开通微信、支付宝提现渠道;</text><br/>
							<text>2)请确保提现信息正确，以免提现失败。</text></view>
						</view>
						
						<view class="my-data-box-content" v-if="withdraw_mode == 2">
							<view class="input-line">
								<text>支付宝名字</text>
								<input type="text" placeholder="请输入支付宝姓名" placeholder-class="input-holder"  v-model="formData.apply_name"/>
							</view>
							<view class="input-line">
								<text>支付宝账号</text>
								<input type="text" placeholder="请填写支付宝账号" placeholder-class="input-holder"  v-model="formData.apply_number"/>
							</view>
							<view class="input-line">
								<text>提现</text>
								<input type="digit" placeholder="请输入提现金额" placeholder-class="input-holder"  v-model="formData.cash" @input="onInput"/>
							</view>
							<view class="input-line">
								<text>到账</text>
								<input type="digit" disabled="true" placeholder-class="input-holder"  v-model="coupon" />
							</view>
							<view class="input-line">
								<text>交易密码</text>
								<input v-model="password" type="password" placeholder="请输入交易密码" placeholder-class="input-holder" />
							</view>
							<view class="tips"  v-if="type == 'money'">
								当前可提现金额:<text>￥{{preview?preview.account.user_money:0}}</text>
					
								<text style="color: #000000;font-weight: bold;" @tap="goPage('/pages/member/password2')">设置交易密码</text>
							</view>
							
							<view class="tips"  v-else>
								当前可提现积分:<text>￥{{preview?preview.account.user_integral:0}}</text>
												
								<text style="color: #000000;font-weight: bold;" @tap="goPage('/pages/member/password2')">设置交易密码</text>
							</view>
							<view class="tips"  v-if="type == 'money'">提现手续费:<text>{{preview?preview.config.withdraw_commission:'-'}}%</text></view>
							
							<view class="tips"  v-if="type == 'integral'">提现手续费:<text>{{preview?preview.config.integral_commission:'-'}}%</text>
								<!-- <text>
									 提现比例, 1 : {{preview?preview.config.integral_withdraw:'-'}}
								</text> -->
							</view>
							<view class="tips">提现说明<text>1)请确保提现信息正确，以免提现失败;</text><br/><text>2)提现申请在1-2个工作日内审核完成，若是节假日申请，则延迟至工作日审核；</text>
							<text>3)每人每天可提现一次放上去</text></view>
						</view>
					</view>
					
					<view class="submit-btn" :class="'bg-'+theme" @tap="onSubmit">提现</view>
					
				</view>
			</view>
		</block>
		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				
					<image src="@/static/dsh.png" mode="aspectFill" class="gzh_qrcode"></image>
				
				<view class="margin-top">
					<button class="close-btn" @click="hideModal">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BjxInputs from '@/components/bjx-inputs/bjx-inputs.vue'

	export default {
		 components: {
		        BjxInputs,
		        // bjxList // 若要查看微信小程序 自定义组件嵌套产生的问题 可打开
		    },
		data() {
			return {
				modalName:'',
				member: null,
				preview: null,
				// CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				formData: {
					transfer_type: 1,
					cash: '',
					realname: '',
					other_number:'',
					mobile: '',
					account_number: '',
					bank_name: '',
					bank_name_other: '',
					wx_number:'',
					apply_number:'',
					apply_name:'',
					type:'money'
					
				},
				type:'money',
				password:'',

				title: '申请提现',

				withdraw_mode: 0,
				paymentPicker: [
					// {
					// 	name:'微信',
					// 	icon: '../../../static/cash_wx.png',
					// 	icon_cur: '../../../static/cash_wx.png',
					// },
					
					{
						name:'银行卡',
						icon: '../../../static/cash_card.png',
						icon_cur: '../../../static/cash_card.png',
					},
					// {
					// 	name:'支付宝',
					// 	icon: '../../../static/cash_ali.png',
					// 	icon_cur: '../../../static/cash_ali.png',
					// },
				],
				coupon:'',
				value1: '',
				value2: '',
				data1: ['这是数据','数组中的字符串数据',' 这个注定是一个很长的选项，可以试试向左滑动一下'],
				data2: [
					{id: 1, value: '这是默认值2'},
				]
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
				this.formData.type = options.type
			}
			if (this.$common.loginAuth(true)) {}
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
					this.getDetail()
				})
			}
		},
		methods: {
				
			hideModal(){
				uni.navigateTo({
					url: '/pages/member/index'				
				})
			},
			onInput(e) {
				// 【不用v-model绑定表单,直接时间获取值】这种方式是uni-app官方的方式,测试结果正确！
				if(this.type=='money'){
					this.coupon =e.detail.value- e.detail.value * this.preview.config.withdraw_commission/100
				}else{
					this.coupon =e.detail.value- e.detail.value * this.preview.config.integral_commission/100
				}
				console.log(this.coupon)
			},
			onSubmit() {
				
				let formData = this.formData
				if (formData.cash <= 0) {
					this.$common.showError('请输入提现金额')
					return
				}
				
				//formData.transfer_type = 2
				//if (this.withdraw_mode == 0) {
					//formData.transfer_type = 1
					if (!formData.realname.trim()) {
						this.$common.showError('请填写姓名')
						return
					}
					// if (!formData.mobile.trim()) {
					// 	this.$common.showError('请填写手机号')
					// 	return
					// }
					if (!formData.account_number.trim()) {
						this.$common.showError('请输入银行卡号')
						return
					}

					// if (!formData.bank_name.trim()) {
					// 	this.$common.showError('请输入开户行')
					// 	return
					// }
					// if (!formData.bank_name_other.trim()) {
					// 	this.$common.showError('请输入银行名称')
					// 	return
					// }
					// if (!formData.other_number.trim()) {
					// 	this.$common.showError('请输入开户行号')
					// 	return
					// }

					// if (formData.cash < this.preview.config.withdraw_lowest_money) {
					// 	this.$common.showError('银行卡提现金额不能低于'+this.preview.config.withdraw_lowest_money+'元')
					// 	return
					// }

				//}
				// if (this.withdraw_mode == 2) {
				// 	formData.transfer_type = 1
				// 	if (!formData.apply_number.trim()) {
				// 		this.$common.showError('请填写支付宝账号')
				// 		return
				// 	}
				// 	if (!formData.apply_name.trim()) {
				// 		this.$common.showError('请填写支付宝名称')
				// 		return
				// 	}
					
				// }
				// if (this.withdraw_mode == 999) {
				// 	formData.transfer_type = 1
				// 	if (!formData.wx_number.trim()) {
				// 		this.$common.showError('请填写微信号')
				// 		return
				// 	}
				// 	if (!formData.realname.trim()) {
				// 		this.$common.showError('请填写姓名')
				// 		return
				// 	}
				// 	console.log(this.member.wx_qrcode)
				// 	if(!this.member.wx_qrcode){
				// 		this.$common.showSuccess('请完善资料，上传微信收款码', (r) => {
				// 					uni.navigateTo({
				// 						url: '/pages/member/edit'				
				// 					})
				// 				})
				// 		return;
				// 	}
					
				// 	// this.$common.showError('目前暂不支持微信，请用支付宝或者银行卡提现')
				// 	// return
					
				// }
				
				// if (!this.password.trim()) {
				// 	this.$common.showError('请输入交易密码')
				// 	return
				// }
				
				if (formData.cash % 1 != 0) {
					this.$common.showError('请输入1的倍数金额')
					return
				}
				
				if(this.checkLoading) return
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				
				
				// formData.withdraw_mode = this.withdraw_mode
				formData.withdraw_mode = 1
				this.checkLoading = true
				// this.$http.post('check_pay_pw', {
				// 	password: this.password,
				// }).then((response) => {
				// 	this.$common.showSuccess('验证通过')
				// 	uni.showLoading({
				// 		title: '处理中'
				// 	})
				// 	this.$http
				// 		.post('withdraw', formData)
				// 		.then((response) => {
				// 			uni.hideLoading()
				// 			this.$common.showSuccess('提交成功，请耐心等待审核', (r) => {
				// 				this.getDetail()
				// 				this.password = ''
				// 			})
				// 		})
				// 	.catch((response) => {
				// 		uni.hideLoading()
				// 	})
						
				// this.checkLoading = false
				// }).catch((response) => {
				// 	uni.hideLoading()
				// this.checkLoading = false
				// })
				
				this.$http
					.post('withdraw', formData)
					.then((response) => {
						uni.hideLoading()
						this.$common.showSuccess('提交成功，请耐心等待审核', (r) => {
							this.getDetail()
							this.password = ''
							uni.navigateTo({
								url: '/pages/member/index'
							})
						})
					})
				.catch((response) => {
					uni.hideLoading()
				})
				
			},
			// 远程加载数据 返回一个对象，{value: 输入框值, callback: 回调函数}
			getData1(e) {
				// 覆盖 value1
				// this.value1 = e.value
				// if(!e.value){
				// 	e.callback(this.data1)
				// }else{
				// 	let data = []
				// 	this.data1.forEach(item=>{
				// 		if(item.indexOf(e.value) > -1){
				// 			data.push(item)
				// 		}
				// 	})
				// 	e.callback(data)
				// }
			},
			getData2(e) {
				console.log(e)
				let _this = this
				_this.value2 = e.value
		
				this.$http
					.get('get_branch_no', {'branch_name':_this.value2})
					.then((response) => {
					
						 e.callback(response.data.data)
			
					})
					.catch((response) => {
						console.log(response)
					})
				
			},
			select1(value){
				this.value1 = value.value
				console.log(1,value)
			},
			select2(value){
				this.value2 = value.value
				this.value1 = value.id
				this.formData.other_number = value.id
				this.formData.bank_name_other = value.value
				console.log(2,value)
			},
			// bug 特定环境：微信小程序中使用自定义组件嵌套
			// 将 bjx-input 组件放在 list 自定义组件中 当绑定值改变时，会有报错，但不会影响结果
			// 可调用组件中的setValue方法避免
			setInputsValue(){
				this.value1 = this.value2
				// this.$refs.inputs1.setValue(this.value)
			},
			focus1(e){
				console.log('框1聚焦', e)
			},
			blur1(e){
				console.log('框1失焦', e)
			},
			getDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.get('withdraw_preview')
					.then((response) => {
						this.preview = response.data.data
						console.log(this.preview);
						if(this.preview.wx){
							this.formData.wx_number = this.preview.wx.wx_number
						}
						if(this.preview.zfb){
							this.formData.apply_name = this.preview.zfb.apply_name
							this.formData.apply_number = this.preview.zfb.apply_number
						}
						if(this.preview.yhk){
							this.formData.bank_name = this.preview.yhk.bank_name
							this.formData.bank_name_other = this.preview.yhk.bank_name_other
							this.formData.account_number = this.preview.yhk.account_number
							this.formData.other_number = this.preview.yhk.other_number
							this.formData.realname = this.preview.yhk.realname
							console.log(this.formData.other_number);
													
						}
						// if(this.preview.is_revice > 0){
						// 	this.modalName="Image";
						// }else{
						// 	if(this.member.current_level< 4 && this.member.is_auta==0){
						// 		uni.showModal({
						// 			title: '请先激活再领取',
						// 			content: '只需激活一次，后续无需再次激活',
						// 			success: function (res) {
						// 				if (res.confirm) {
						// 					uni.navigateTo({
						// 						url: '/pages/member/appy_comshare?id=0'				
						// 					})
						// 				} else if (res.cancel) {
						// 					uni.navigateTo({
						// 						url: '/pages/member/index'
						// 					})
						// 					return;
						// 				}
						// 			}
						// 		});
						// 		return;
						// 	}
						// }
						uni.hideLoading()
					})
					.catch((response) => {
						uni.hideLoading()
					})

			},
			setAll() {
				this.formData.cash = this.preview.account.user_money
			},
			PaymentPickerChange(i) {
				console.log(i)
				this.withdraw_mode = parseInt(i)
			},
		},
	}
</script>

<style>
	.gzh_qrcode {
		width: 600rpx;
		height: 600rpx;
	}
	.payment_ic0{
		height: 450rpx!important;
	}
	.payment_ic2{
		height: 560rpx!important;
	}
	.whole-box{
		background-image: url(../../../static/red-new/new-back.png);
		background-size: 100% 100%;
		min-height: calc(100vh - 45px - 24px);
		padding: 12px 0;
		/* height: 1200rpx; */
	}
	.gold-black-box{
		padding: 12px 0;
		margin: 60rpx 10rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		height: 1350rpx;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 300rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		height: 300rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.top-box-content .bg-logo{
		width: 196rpx;
		height: 54rpx;
		padding-left: 20rpx;
	}
	.top-box-content .page-title{
		/* padding-left: 40rpx; */
		font-size: 34rpx;
		font-weight: bold;
		color: #8A7308;
	}
	
	.top-box-content .data-box{
		padding: 0 40rpx;
		width: 100%;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.data-box view{
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.data-box view image{
		width: 121rpx;
		height: 121rpx;
	}
	.data-box view text{
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #4C4C4C;
	}
</style>

<style>
	.gold-black-box .my-data-box{
		margin-top: 12px;
		width: 690rpx;
		height: 880rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		/* overflow: hidden; */
		position: relative;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		/* height: 336rpx; */
		position: absolute;
		left: 0;
		top: 0;
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
		/* padding: 0 40rpx; */
		padding-bottom: 20rpx;
	}
	.my-data-box-content .input-line{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 28rpx;
		background: #ffffff;
		/* margin-top: 20rpx; */
		border-radius: 15rpx;
		/* border-bottom: 1rpx solid #F5F5F5; */
	}
	.input-line text{
		width: 170rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
		
	}
	
	.input-line input{
		flex: 1;
		font-size: 30rpx;
		color: #000000;
		
	}
	.input-holder{
		font-size: 30rpx;
		color: #D8D8D8;
	}
	
	.my-data-box-content .tips{
		padding: 20rpx 28rpx 0;
		font-size: 26rpx;
		color: #8A7308;
		opacity: 0.84;
		
	}
	.tips text{
		margin-left: 10rpx;
	}
	
	.gold-black-box .submit-btn{
		width: 50%;
		margin-top: 290rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: #FB7483;
		border-radius: 30rpx;
		font-size: 30rpx;
		color: #ffffff;
	}
</style>
